<!DOCTYPE html>
<html lang="zh" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue的入门案例</title>
    <!-- 第一步:引入vue.js资源-->
    <script type="application/javascript" src="./node_modules/vue/dist/vue.js"></script>
</head>
   <!-- vue不能直接作用在body元素上 -->
<body>
      <!--div 指定vue的作用范围
      数据双向绑定:----数据代表视图数据view,模型数据model.双向概念如下:一方数据发生改变,会影响另一方数据;
      -->

  <div id="app">
      <!-- v-model vue指令,用于绑定模型数据     v-on:click 点击事件
           这里的v-on指令绑定点击事件,而不是普通的onclick,然后直接操作num
           普通的onclick是无法直接操作num的.   v-model，代表双向绑定。
       -->
      请输入: <input type="text" v-model="name"><button v-on:click="add()">点我就干你</button><br>
      <!--
         {{}} vue的插值表达式,常见作用:是用于展示模型数据,在表达式中还可以调用方法(调用的方法必须有返回值)
         例如 1 + 1，没有结果的表达式不允许使用，如：var a = 1 + 1;
         可以直接获取Vue实例中定义的数据或函数(比如:定义一个div.然后标签中间写{{name}},然后定义Vue实例,在data中给name赋值.)
         表达式还可以做:算术运算,逻辑运算(例如:三元运算符操作).比较运算等
         通过{{}},来渲染刚刚定义的name属性.
       -->
       <!--
          双向绑定: 我们通过v-model和name进行绑定,同时通过{{name}}在页面输出
          我们可以发现输入框的变化引起啦data中的name变化,同时页面输出也会跟着变化.
           input与name绑定,input的value值(就是我们输入的值)变化,影响到啦data中的name值.
           页面{{name}}与数据name绑定,因此name值变化,引起啦页面效果变化.
       -->
            {{name}}是黑马第一渣男,有{{num}}个三.
          <!--  {{100+100}}======200-->
  </div>
</body>
<script>
    /*初始化vue实例对象. 方法里面{}
    * 每个vue应用都是通过Vue函数创建一个新的VUE实例开始的.
    * 在构造函数中传入一个对象,并且在对象中声明各种Vue需要的数据和方法.包括:
    * 1.el---获取Vue作用的HTML元素
    * 每个Vue实例都需要关联一段HTml模板,Vue会基于此模板进行视图渲染.我们可以通过el属性来指定.
    * 这样Vue就可以基于id为app的div元素作为模板进行渲染啦.在这个div范围以外的部分是无法使用Vue特性的.
    * 2.data---Vue中数据属性
    *  当Vue实例被创建时,它会尝试获取在data中定义的所有属性,用于视图的渲染.并且"监视"data中的属性变化,
    *  当data发生改变,所有相关的视图都将重新渲染,这就是"响应式"系统;
    * 3.methods----Vue中方法属性
    * Vue实例中除了可以定义data属性，也可以定义方法，并且在Vue的作用范围内使用。
    *
    * */
    new Vue({
       el: "#app",  //指定vue作用的HTML元素  el:是element元素的意思.缩写.通过id选中要渲染的页面元素,本例是一个div
       data:{ //初始化vue模型数据,数据是一个对象,里面有很多属性,都可以渲染到视图中.
           name: "渣渣飞",  //指定的name属性
           num: 1          //指定num属性
       } ,
        methods:{ //vue神=
       /*   add:function () {
              this.num++;
          }*/
        //可以简写,去掉function
           add(){
               this.num++;  //this就是当前的Vue实例,在Vue对象内部,必须使用this才能访问到Vue中定义的data内属性.方法等.
           }
        }
    });
</script>
</html>